<template>
  <div class="dictionary-container">
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典列表</span>
            <el-button
              class="filter-item"
              size="mini"
              style="float: right;padding: 4px 10px"
              type="primary"
              icon="el-icon-plus"
              @click="$refs.form.dialog = true;isAdd = true"
            >新增</el-button>
          </div>
          <!--工具栏-->
          <div class="margin-bottom">
            <!-- 搜索 -->
            <el-input
              clearable
              placeholder="输入搜索内容"
              style="width: 200px;"
              class="filter-item"
              size="mini"
            />
            <el-button
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-search"
            >搜索</el-button>
          </div>
          <!--表格渲染-->
          <el-table
            v-loading="loading"
            :data="dictionaries"
            size="small"
            border
            highlight-current-row
            style="width: 100%;"
            @current-change="currentChange"
          >
            <el-table-column :show-overflow-tooltip="true" prop="name" label="名称"/>
            <el-table-column :show-overflow-tooltip="true" prop="value" label="描述"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
                <el-popover :ref="scope.row.id" placement="top" width="180">
                  <p>此操作将删除字典与对应的字典详情，确定要删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                    <el-button
                      :loading="delLoading"
                      type="primary"
                      size="mini"
                      @click="subDelete(scope.row.id)"
                    >确定</el-button>
                  </div>
                  <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典详情</span>
            <el-button
              class="filter-item"
              size="mini"
              style="float: right;padding: 4px 10px"
              type="primary"
              icon="el-icon-plus"
              @click="addDetail"
            >新增</el-button>
          </div>
          <dictDetail ref="dictDetail"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import eForm from './form';
import dictDetail from './detail';
import { dictionary_all, dictionary_remove } from '@/api/system';
export default {
  components: { eForm, dictDetail },
  data() {
    return {
      isAdd: false,
      delLoading: false,
      loading: false,
      dictionaries: [],
      allDictionaries: []
    };
  },
  created() {
    this.getDictionries();
  },
  methods: {
    async getDictionries() {
      this.loading = true;
      const res = await dictionary_all();
      this.allDictionaries = res.data;
      this.dictionaries = res.data.reduce((i, c) => {
        if (c.lv === 2) {
          i.push(c);
        }
        return i;
      }, []);
      this.loading = false;
    },
    async subDelete(id) {
      // const isDelete = this.allDictionaries.find(i => i.parentId === id);
      // if (isDelete) {
      //   this.$message({
      //     message: '请先清空字典详情！',
      //     type: 'warning'
      //   });
      //   return;
      // }
      try {
        this.delLoading = true;
        await dictionary_remove(id, {
          id: id
        });
        this.delLoading = false;
        this.$refs[id].doClose();
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getDictionries();
      } catch (error) {
        console.error(error);
        this.delLoading = false;
      }
    },
    currentChange(val) {
      if (val) {
        this.$refs.dictDetail.dictName = val.name;
        this.$refs.dictDetail.dictId = val.id;
        this.$refs.dictDetail.init();
      }
    },
    edit(data) {
      this.isAdd = false;
      const _this = this.$refs.form;
      _this.form = {
        id: data.id,
        name: data.name,
        remark: data.remark
      };
      _this.dialog = true;
    },
    addDetail() {
      const _this = this.$refs.dictDetail.$refs.form;
      this.$refs.dictDetail.isAdd = true;
      _this.dialog = true;
      _this.form = {
        id: '',
        lv: 0,
        name: '',
        value: '',
        supplement: '',
        parentId: null
      };
    }
  }
};
</script>

<style scoped>
.head-container {
  margin-bottom: 20px;
}
</style>
